uni

您所在的位置：网站首页 › 黑马uniapp从入门到实战教程 › uni

uni

2023-09-16 20:17| 来源: 网络整理| 查看: 265

初始化项目

编辑器为HBuilder 编辑器的安装看之前的打包项目中有介绍十分钟教你学会打包APP

创建uniapp项目

在这里插入图片描述一开始是没有云服务空间的，我们右击创建点击之后会打开云空间网址阿里云云空间创建好之后

在这里插入图片描述右击关联即可

初始化数据库

在这里插入图片描述我们有一个云数据库文件数据库下载链接此文件一定要放到cloudfunctions 文件夹下

右击初始化等待即可

实现tabbar

准备工作：在pages下面创建tabbar文件夹，然后在此文件夹下创建三个文件夹，右击新建页面，勾选上在pages.json注册在这里插入图片描述

"tabBar":{ "color":"#666", "selectedColor":"#f07373", "backgroundColor":"#FFFFFF", "list":[ { "pagePath":"pages/tabbar/index/index", "iconPath":"static/home.png", "selectedIconPath":"static/home-active.png", "text":"首页" }, { "pagePath":"pages/tabbar/follow/follow", "iconPath":"static/follow.png", "selectedIconPath":"static/follow-active.png", "text":"关注" }, { "pagePath":"pages/tabbar/my/my", "iconPath":"static/my.png", "selectedIconPath":"static/my-active.png", "text":"我的" } ] }

在这里插入图片描述

在这里插入图片描述点击对应的就可以跳转了图片可以自己做，也可以去阿里巴巴矢量库图标下载喜欢的 iconfont-阿里巴巴矢量库图标

自定义导航栏

我们使用scss语法做样式编写，大家可以去插件市场下载在这里插入图片描述插件链接等待他自己导入即可我们做自定义导航栏 pages.json对应下面加入这个语句就可以将他原本的导航栏去掉

正常情况，我们需要引入组件才可以使用，但是uniapp中不需要写，自带easyCom功能如果是components/组件名/组件名.vue的话就可以直接使用此组件组件名写错了，大家改为正确的哦 navbar 在这里插入图片描述

components/navbar/navbar.vue编写

在这里插入图片描述 uni.scss可以设置颜色变量全局使用虽然h5页面中无影响但是小程序中就不同了我们要做一下小程序适配工作

最终效果在这里插入图片描述

最终代码

uni-app、vue、react export default { data() { return { statusBarHeight:20, navBarHeight:45, windowWidth:375 }; }, created() { this.onload() }, methods:{ onload(){ // 获取手机信息 const info= uni.getSystemInfoSync() this.statusBarHeight=info.statusBarHeight this.windowWidth=info.windowWidth // #ifndef H5 || APP-PLUS || MP-ALIPAY // 获取胶囊位置 const menuButtonInfo=uni.getMenuButtonBoundingClientRect() this.navBarHeight=(menuButtonInfo.bottom-info.statusBarHeight)+(menuButtonInfo.top-info.statusBarHeight) this.windowWidth=menuButtonInfo.left // #endif } } } .navbar{ .navbar-fixed{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; background-color: $mk-base-color; .navbar-content{ padding: 0 15px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; .navbar-serach{ display: flex; align-items: center; width: 100%; height: 30px; border-radius: 30px; padding: 0 10px; background-color: #fff; .navbar-serach_icon{ margin-right: 10px; } .navbar-serach_text{ font-size: 12px; color: #999; } } } } } 自定义导航栏组件 components/tab/tab.vue编写

在这里插入图片描述

get_label 云函数编写

在这里插入图片描述

引用数据库数据

在pages\tabbar\index\index.vue中编写如下

我们需要在methods里面定义函数来获取云函数返回的值，让将值赋值给定义的变量，再传给组件在这里插入图片描述组件里使用props来接收父组件传过来的值效果就是这样子

统一管理云函数请求

我们在根目录下/common/api里面进行封装请求

在这里插入图片描述在api/index.js编写

在main.js中引入，在挂载至$api上供全局使用在这里插入图片描述我们就可以在index.vue首页中调用了效果还是一样的没变化但是我建议分开写

不至于一个文件写很多代码

list代表文章类的

后面还有许多类可以自己起名字，我们将一个类的请求放到一个里面

在这里插入图片描述我们在index.js中做一个批量导出操作，这样我们就不需要写一个导出一个了

在这里插入图片描述

完成tab选项卡切换高亮

点击某个颜色高亮在这里插入图片描述添加点击事件并处理添加类名做颜色改变

在这里插入图片描述

在这里插入图片描述 index.vue父组件中接收

在这里插入图片描述

完成首页内容

红色框内为内容区域，可以在框内上下滚动的在这里插入图片描述

在这里插入图片描述暂时代码

{{item}} export default { data() { return { tabList:[] } }, onLoad() { this.getLabel() }, methods: { // 获取tab选项卡内容 getLabel(){ // 调用api this.$api.get_label({name:'get_label'}) .then(res=>{ this.tabList=res.data }) }, tab({data,index}){ // console.log(data,index) } } } page{ height: 100%; display: flex; .home{ display: flex; flex-direction: column; flex: 1; .scroll{ flex: 1; overflow: hidden; box-sizing: border-box; .list-scrool{ height: 100%; display: flex; flex-direction: column; } } } }

我们在内容区域放置自定义内容组件在这里插入图片描述基础卡片实现多图卡片实现大图模式最后一个mode值应该为column 在主页面传值，组件中接收，然后再用条件判断显示

在这里插入图片描述

完整代码

客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海前段 120浏览客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海前段 120浏览客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海客户反馈进度沙河第六个赫迪拉火锅底料海底捞黑风海林海海前段 120浏览 export default { props:{ mode:{ type:String, default:'base' } }, data() { return { }; } } .list{ .listcard { display: flex; padding: 10px; margin: 10px; border-radius: 5px; box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1); box-sizing: border-box; .listcard-image { flex-shrink: 0; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; image { width: 100%; height: 100%; } } .listcard-content { display: flex; flex-direction: column; justify-content: space-between; padding-left: 10px; width: 100%; .listcard-content_title { position: relative; padding-right: 30px; font-size: 14px; color: #333; font-weight: 400; line-height: 1.2; text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .listcard-content_des { display: flex; justify-content: space-between; font-size: 12px; .listcard-content_des-label { display: flex; .listcard-content_des-label-item { padding: 0 5px; margin-right: 5px; border-radius: 15px; color: $mk-base-color; border: 1px $mk-base-color solid; } } .listcard-content_des-browe { color: #999; line-height: 1.5; } } } &.mode-column { .listcard-content { width: 100%; padding-left: 0; } .listcard-image { display: flex; margin-top: 10px; width: 100%; height: 70px; .listcard-image_item { margin-left: 10px; width: 100%; border-radius: 5px; overflow: hidden; &:first-child { margin-left: 0; } image { width: 100%; height: 100%; } } } .listcard-content_des { margin-top: 10px; } } &.mode-image { flex-direction: column; .listcard-image { width: 100%; height: 100px; } .listcard-content { padding-left: 0; margin-top: 10px; .listcard-content_des { display: flex; align-items: center; margin-top: 10px; } } } } }

首页切换实现敬请期待下一篇

【本文地址】

公司简介

联系我们